<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>gbim viewer</title>

  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="pragma" content="no-cache" />

  <!-- External libraries -->

  <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.js"></script>


  <!-- 嵌入bimsop viewer的相关类库 -->
  <link href="http://gb9.bimsop.com/bimsopviewer/release/v0.3/style-bottom.css" rel="stylesheet">
  <script src="http://gb9.bimsop.com/bimsopviewer/release/v0.3/three.min.js"></script>
  <script src="http://gb9.bimsop.com/bimsopviewer/release/v0.3/viewer.min.js"></script>
  <!-- <script src="devtool.js"></script> -->

  <script src="./extensions/NewApi20180511.js"></script>

  <!-- <script src="./extensions/Basic.js"></script>
       <script src="./extensions/Workshop.js"></script>
       <script src="./extensions/Toolbar.js"></script>
       <script src="./extensions/DockingPanel.js"></script>
       <script src="./extensions/PropertyPanel.js"></script>
  -->
  <!-- Our scripts -->
  <style>
    html {
      height: 100%;
    }

    /* Reset */

    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    form,
    fieldset,
    input,
    textarea,
    p,
    blockquote,
    th,
    td {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    fieldset,
    img {
      border: 0;
    }

    address,
    caption,
    cite,
    code,
    dfn,
    th,
    var {
      font-style: normal;
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
    }

    caption,
    th {
      text-align: left;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: 100%;
      font-weight: normal;
    }

    q:before,
    q:after {
      content: '';
    }

    abbr,
    acronym {
      border: 0;
    }

    /* Baseline */

    body,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font: normal 12px/1.3em Helvetica, Arial, sans-serif;
      color: #333;
    }

    h1 {
      font-size: 22px;
      font-weight: bold;
    }

    h2 {
      font-size: 19px;
      font-weight: bold;
    }

    h3 {
      font-size: 16px;
      font-weight: bold;
    }

    h4 {
      font-size: 14px;
      font-weight: bold;
    }

    h5 {
      font-size: 12px;
      font-weight: bold;
    }

    p {
      margin: 10px 0;
    }

    body {
      text-align: center;
      height: 100%
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .clear {
      clear: both;
      bottom: 0px;
      position: absolute;
    }

    div#project {
      margin: 0 auto;
      width: 100%;
      text-align: left;
    }

    div#viewer {
      width: -moz-calc(100% - 5px);
      width: -webkit-calc(100% - 5px);
      width: calc(100% - 5px);
      height: -moz-calc(100% - 70px);
      height: -webkit-calc(100% - 70px);
      height: calc(100% - 70px);
      cursor: pointer;
      padding: 0px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      background-color: #eee;
      border: 2px dashed #aaa;
      border-radius: 10px;
    }

    div#footer {
      margin: 0 auto;
      width: 100%;
      text-align: left;
    }


  </style>

  <script>

      // 轻量转换后的模型路径，这个示例采用云端的一个示例模型，如果需要自己的模型，您可以和我们联系购买轻量化引擎或服务。
      var docs = [
        { path: ['https://gisbim.bimsop.com/peacock/%E6%AF%95%E5%8A%A0%E7%B4%A2%E6%B5%8B%E8%AF%95%E6%A8%A1%E5%9E%8B-1560390285033/%E6%AF%95%E5%8A%A0%E7%B4%A2%E6%B5%8B%E8%AF%95%E6%A8%A1%E5%9E%8B-1560390285033.gbim'], name: '小别墅' },
      ];

        // // 轻量转换后的模型路径，这个示例采用云端的一个示例模型，如果需要自己的模型，您可以和我们联系购买轻量化引擎或服务。
        // var docs = [
        //   {
        //     path:
        //       [
        //         'http://gb9.bimsop.com/peacock/%E5%BB%BA%E7%AD%91%E6%A8%A1%E5%9E%8B-1515624619652/%E5%BB%BA%E7%AD%91%E6%A8%A1%E5%9E%8B-1515624619652.gbim',
        //         'http://gb9.bimsop.com/peacock/%E6%9C%BA%E7%94%B5110-1515624619621/%E6%9C%BA%E7%94%B5110-1515624619621.gbim',
        //         'http://gb9.bimsop.com/peacock/%E7%BB%93%E6%9E%84%E6%A8%A1%E5%9E%8B%20-1515624472724/%E7%BB%93%E6%9E%84%E6%A8%A1%E5%9E%8B%20-1515624472724.gbim'
        //       ],
        //     name: '自动化所'
        //   },
        // ];

    Bimsop.Viewing.HTTP_REQUEST_HEADERS = {
      "If-Modified-Since": "Sat, 29 Oct 1994 19:43:31 GMT"
    };

    $(document).ready(function () {
      var modelPath = docs[0].path;
      var options = { 'docid': modelPath, env: 'Local' };
      oViewer = new Bimsop.Viewing.Private.GuiViewer3D($("#viewer")[0], {}); // With toolbar
      v = oViewer;
      Bimsop.IS_LOCAL = true;
      Bimsop.Viewing.Initializer(options, function () {
        oViewer.start();
        oViewer.addEventListener(Bimsop.Viewing.MODEL_STRUCTURE_TREE_MERGED_EVENT, function (tree) {console.log(tree);});
        oViewer.addEventListener(Bimsop.Viewing.MODEL_LEVEL_TREE_MERGED_EVENT, function (e) { console.log(e.tree); });
        oViewer.addEventListener(Bimsop.Viewing.ALL_DONE_EVENT, function (e) {
          console.log('all model loaded');
          // console.log(e.models);

          // 加载一个自定义扩展
          // oViewer.loadExtension('Bimsop.Extension.NewApi20180511');
        })

        oViewer.addEventListener(Bimsop.Viewing.SELECTION_CHANGED_EVENT, function (e) {

          console.log(e);
        })

        oViewer.load(options.docid, { modelName: 'test model name' }, function (model) { }, function (err) { if (err) console.log(err) });



      });  //Viewing.Initializer
    }); //$(document).ready
  </script>
</head>

<body>
  <div id="project">
    <div>
      <div id="viewer" class="left" style="position:absolute"></div>

    </div>
  </div>

</body>

</html>